<template>
    <div class="news">
        <div class="left">
            <h3>新闻资讯</h3>
            <ul>
                <li v-for="(item2) in news">
                    <span><a href="#">{{ item2.event }}</a></span>
                    <b>2024-03-20</b>
                </li>
            </ul>

        </div>
        <div class="center">
            <h3>卧龙介绍</h3>
            <p>公司成立于1984年,<br>经过近30年的发展</p>
            <p>已成为电器制造，房地产开发和金融<br>投资三业并举的综合性跨国...</p>
        </div>
        <div class="right">
            <h3>人才招聘</h3>
            <p>培养一流的人才，铸造一流的工程<br>实现员工与企业的共同发展</p>
            <div class="imgs">
                <img src="../assets/img/MORE.png" alt="">
                <img src="../assets/img/potting.png" alt="">
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref , reactive } from 'vue'
const news=ref([{
    time:2013-7-30,
    event:'陈建成董事长出席ATB集团召开年度销售大会'
},{
    time:2013-7-30,
    event:'中国电器工业协会马力点击分会再卧龙召开理事长...'
},{
    time:2013-7-30,
    event:'陈建成董事长访问中国驻德大使馆'
},{
    time:2013-7-30,
    event:'企业文化是企业持续经营的关键要素'
},{
    time:2013-7-30,
    event:'陈建成监事长再ATB集团2013年销售会议上发表重要...'
},{
    time:2013-7-30,
    event:'喜迎七一 唱响卧龙 年轻力量激发企业持久活力 卧龙举...'
}])
</script>

<style scoped lang="less">
a{
    color: black;
    font-size: 10px;
}
.news{
    display: flex;
    height: 250px;
    .left{
        flex:2;
        height: 100%;
        padding: 20px;
            ul{
                list-style: disc;
                padding-left: 20px;
                margin-top: 25px;
                li{
                    b{
                        float: right;
                    }
                }
            }
    }
    .center{
        flex:1;
        background-color:#f1f1f1;
        height: 100%;
        padding: 20px;
        h3{
            margin-bottom: 30px;
        }
        p{
            margin-bottom: 30px;
        }
        p:last-child{
            color: #858585;
        }
    }
    .right{
        flex:1;
        height: 100%;
        padding: 20px;
        h3{
            margin-bottom: 25px;
        }
        .imgs{
            display:flex;
            justify-content: space-between;
            align-items: center;
        }
    }
}
</style>